<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!--<script th:src="@{/js/jquery.min.js}"/>-->
    <title>登录</title>
    <style type="text/css">
        body {
            background-size: 100%;
            margin: 0;
            padding: 0;
        }

        .center-box {
            background-color: rgba(2, 0, 3, 0.56);
            padding-bottom: 40px;
            position: absolute;
            text-align: center;
            border: 2px solid #727369;
            top: 40%;
            left: 50%;
            height: 400px;
            width: 400px;
            border-radius: 20px;

            transform: translate(-50%, -50%);
            /*background: url("../img/bj.jpg");*/
        }

        .form-input {
            border: 2px solid #eef5af;
            width: 300px;
            height: 45px;
            border-radius: 5px;
            margin-bottom: 20px;
            text-align: center;

        }


        .sub {
            width: 100px;
            height: 45px;
            border: 0;
            border-radius: 5px;
            margin-bottom: 20px;
            text-align: center;
        }

        .sub:hover {
            color: #7985b0;
            width: 110px;
            height: 47px;
        }


        .form-input:hover {
            width: 320px;
            height: 47px;
            border: 4px #64ff6e solid;
            color: #795ebe;
            font-size: 24px;
        }

        input::-webkit-input-placeholder {
            color: #ccc;
        }

        input::-ms-input-placeholder {
            color: #ccc;
        }


    </style>

</head>
<body>

<div class="center-box">
    <h1 style="color: #e85757;font-family: Calibri"><font color="#7fffd4">L</font> <font color="red">O</font> <font
            color="#bc8f8f">G</font> I N</h1>
    <h5 class="tishi" hidden="true" style="color: red"></h5>
    <input type="text" placeholder="username" required id="username" class="form-input"><br>
    <input type="password" placeholder="password" required id="password" class="form-input"><br>
    <input type="submit" onclick="sub()" value="登录" class="sub"><br>
    <h5 style="float: right;margin-right: 20px;color: #df94c4">by: 王瑞</h5>


</div>
</body>

<script type="text/javascript">
    function sub () {
        let username = $("#username").val();
        let password = $("#password").val();
        let user = {
            username: username,
            password: password
        };

        let stringify = JSON.stringify(user);

        $.ajax({
            url: "/sss/login/login",
            type: "post",
            dataType: "JSON",
            contentType: "application/json;charset=utf-8",
            data: stringify,
            success: function (data) {
                let ok = data.isOk;
                if (ok === true) {
                    window.location.href = "/sss/index/index";
                } else {
                    $(".tishi").text(data.msg);
                    $(".tishi").attr("hidden", false);
                }
            }
        })
    };

</script>







